<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      ref="searchForm"
      :model="searchModel"
      label-width="55px"
      :inline="true"
      size="mini"
    >
      <el-form-item>
        <el-input v-model="searchModel.name" placeholder="工序类别" />
      </el-form-item>
      <el-form-item>
        <el-button
          size="mini"
          icon="el-icon-search"
          type="primary"
          @click="search(pageNo, pageSize)"
        >查询</el-button>
        <el-button icon="el-icon-delete" @click="resetValue()" size="mini">重置</el-button>
      </el-form-item>
      <!-- 功能 -->
      <div style="margin: 0px 0px 5px 0px">
        <el-button
          style="font-size: 10px"
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="openAddWindow()"
        >新增</el-button>
        <!-- 批量删除 -->
        <el-button @click="handleDelete()" size="mini" icon="el-icon-delete" type="danger" style="font-size: 10px">删除</el-button>
        <el-button
          style="font-size: 10px"
          icon="el-icon-download"
          size="mini"
          type="primary"
          plain
          @click="exportExcel()"
        >导出</el-button>
      </div>
    </el-form>
    <!-- 数据列表 -->
    <el-table
      class="tableBox"
      :data="list"
      :height="tableHeight"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}">
      <el-table-column width="65px"
                       type="selection">
      </el-table-column>
      <el-table-column
        prop="code"
        label="类别编码">
      </el-table-column>
      <el-table-column
        prop="name"
        label="工序类别">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success" size="mini" style="font-size: 10px">启用</el-tag>
          <el-tag v-else type="danger" size="mini" style="font-size: 10px">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createBy"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        label="操作"
        width="350px"
      >
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)"  size="mini" type="primary" icon="el-icon-edit-outline" style="font-size: 10px">编辑</el-button>
          <el-button @click="del(scope.row.id)" icon="el-icon-delete" type="warning" size="mini" style="font-size: 10px">删除</el-button>
          <el-button @click="handleINFO(scope.row)" type="success" icon="el-icon-view" size="mini" style="font-size: 10px" plain>查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <!-- 分页工具栏 -->
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加和修改窗口 -->
    <system-dialog
      :title="addDialog.title"
      :visible="addDialog.visible"
      :width="addDialog.width"
      :height="addDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">

        <el-form
          ref="form"
          :model="data"
          :rules="rules"
          label-width="130px"
          :inline="true"
          size="mini"
          class="demo-form-inline"
        >
          <p>基本信息</p>
          <el-form-item label="类别编码" prop="code" >
          <span slot="label">
            <span class="formLabel"><strong>类别编码</strong></span>
          </span>
            <el-input v-model="data.code" class="f-item"/>
          </el-form-item>
          <el-form-item label="类别名称"  prop="name">
            <span  slot="label">
              <span class="formLabel"> <strong>类别名称</strong></span>
            </span>
            <el-input v-model="data.name"  class="f-item"/>
          </el-form-item>
          <el-form-item prop="status"  label="状态">
            <span slot="label">
              <span class="formLabel"><strong>状态</strong></span>
            </span>
            <el-checkbox v-model="checked"></el-checkbox>
            <span>
                <span class="formLabel"><strong> 启用</strong></span>
              </span>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <span  slot="label">
              <span class="formLabel"><strong>备注</strong></span>
            </span>
            <el-input style="width: 450px" v-model="data.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!-- 详情信息窗口 -->
    <system-info-dialog
      :title="infoDialog.title"
      :visible="infoDialog.visible"
      :width="infoDialog.width"
      :height="infoDialog.height"
      @onClose="onClose"
    >
      <div slot="content">

        <el-form
          ref="form"
          :model="data"
          :rules="rules"
          label-width="130px"
          :inline="true"
          size="mini"
          class="demo-form-inline"
        >
          <p>基本信息</p>
          <el-form-item label="类别编码" prop="code" >
          <span slot="label">
            <span class="formLabel"><strong>类别编码</strong></span>
          </span>
            <el-input v-model="data.code" class="f-item"/>
          </el-form-item>
          <el-form-item label="类别名称"  prop="name">
            <span  slot="label">
              <span class="formLabel"> <strong>类别名称</strong></span>
            </span>
            <el-input v-model="data.name"  class="f-item"/>
          </el-form-item>
          <el-form-item prop="status"  label="状态">
            <span  slot="label">
              <span class="formLabel"><strong>状态</strong></span>
            </span>
            <el-checkbox v-model="checked"></el-checkbox>
            <span>
                <span class="formLabel"><strong> 启用</strong></span>
              </span>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <span  slot="label">
              <span class="formLabel"><strong>备注</strong></span>
            </span>
            <el-input style="width: 450px" v-model="data.remark" type="textarea" :rows="3" />
          </el-form-item>
          <p>系统信息</p>
          <el-form-item label="创建人" prop="createBy">
              <span  slot="label">
                <span class="formLabel"><strong>创建人</strong></span>
              </span>
            <el-input v-model="data.createBy" />
          </el-form-item>
          <el-form-item label="创建日期"  prop="createTime">
              <span  slot="label">
                <span class="formLabel"><strong>创建日期</strong></span>
              </span>
            <el-input v-model="data.createTime" />
          </el-form-item>
          <el-form-item prop="updateBy"  label="修改人">
              <span  slot="label">
                <span class="formLabel"><strong>修改人</strong></span>
              </span>
            <el-input v-model="data.updateBy" />
          </el-form-item>
          <el-form-item prop="updateTime"  label="修改日期">
              <span  slot="label">
                <span class="formLabel"><strong>修改日期</strong></span>
              </span>
            <el-input v-model="data.updateTime" />
          </el-form-item>
        </el-form>
      </div>
    </system-info-dialog>
  </el-main>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

//导入工序类别api脚本
import api from '@/api/technology/procedure-category';

//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
import SystemInfoDialog from '@/components/system/SystemInfoDialog.vue';
// import UploadExcelDialog from '@/components/system/UploadExcelDialog';

export default {
  //注册组件
  components:{
    SystemDialog,
    SystemInfoDialog
  },
  data() {
    return {
      multipleSelection: [],
      list: [],
      tableHeight: 0, // 表格高度
      pageNo: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0, // 总数量
      checked: false,
      // 查询条件对象
      searchModel: {
        name: '',
        status: null,
        pageNo: 1,
        pageSize: 10
      },
      data: {
        id: null,
        code: '',
        name: '',
        status: null,
        remark: '',
        approveBy: '',
        approveTime: null,
        createBy: '',
        createTime: null,
        updateBy: '',
        updateTime: null
      },
      // 添加和修改工序类别窗口属性
      addDialog: {
        title: '工序类别信息',
        visible: false,
        height: 450,
        width: 810
      },
      // 工序类别详情窗口属性
      infoDialog: {
        title: '工序类别信息',
        visible: false,
        height: 670,
        width: 810
      },
      // 弹框
      rules: {
        code: [{ required: true, trigger: 'blur', message: '请输入类别编码' }],
        name: [{ required: true, trigger: 'blur', message: '请输入类别名称' }]
      },

      statusOpts: [{
        value: 0,
        label: '未审核'
      }, {
        value: 1,
        label: '已审核'
      }],

      auditObj: {
        ids: []
      },

      BASE_API: process.env.VUE_APP_BASE_API,
      TOKEN: {"token": getToken()},
    }
  },
  created(){
    this.search()
  },
  // 挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 250
    })
  },
  methods: {
    // 获取复选框中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 数据导出excel
    exportExcel() {
      // this.$message.success("等确认了，Excel模板后 开发接口！")
      axios({
        method: "get",
        url: this.BASE_API+"api/procedureCategory/export",
        responseType: 'blob',
        headers: {
          "token": getToken()
        }
      })
        .then(resp => {
          if (!resp) {
            this.$message.warning("导出数据失败！")
            return
          }
          const link = document.createElement('a');
          let blob = new Blob([resp.data], {type: 'application/vnd.ms-excel'});
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);

          link.setAttribute('download', '工序类别列表' + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
    },
    // 批量删除 TODO
    async handleDelete() {
      this.auditObj.ids = this.multipleSelection.map(item => {
        return item.id;
      })
      if (this.auditObj.ids.length > 0) {
        const confirm = await this.$myconfirm('确定要删除该数据吗?')
        if (confirm) {
          const res = await api.del(this.auditObj)
          // 判断是否成功
          if (res.success) {
            // 成功提示
            this.$message.success(res.message)
            // 刷新
            this.search()
          } else {
            // 失败提示
            this.$message.error(res.message)
          }
        }
      }else{
        this.$message.success("请选择要删除的数据！")
      }
    },
    async del(id) {
      this.auditObj.ids = []
      if (id != "" && id != null) {
        this.auditObj.ids  = [id];
      }
      if (this.auditObj.ids.length > 0) {
        const confirm = await this.$myconfirm('确定要删除该数据吗?')
        if (confirm) {
          const res = await api.del(this.auditObj)
          // 判断是否成功
          if (res.success) {
            // 成功提示
            this.$message.success(res.message)
            // 刷新
            this.search()
          } else {
            // 失败提示
            this.$message.error(res.message)
          }
        }
      }
    },
    // 查询工序类别
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo
      this.searchModel.pageSize = pageSize
      // 发送查询请求
      const res = await api.pageList(this.searchModel)
      if (res.success) {
        this.list = res.data.records
        this.total = res.data.total - 0
      }
    },
    // 当每页数量发生变化时触发该事件
    handleSizeChange(size) {
      this.pageSize = size // 将每页显示的数量交给成员变量
      this.search(this.pageNo, size)
    },
    // 当页码发生变化时触发该事件
    handleCurrentChange(page) {
      this.pageNo = page
      // 调用查询方法
      this.search(page, this.pageSize)
    },
    // 打开添加窗口
    openAddWindow() {
      // 清空表单数据
      this.$resetForm('form', this.data)
      this.addDialog.title = '新增工序类别'// 设置窗口标题
      this.addDialog.visible = true // 显示窗口
    },
    // 关闭窗口
    onClose() {
      this.addDialog.visible = false
      this.infoDialog.visible = false
      this.uploadDialog.visible = false
    },
    // 窗口确认事件
    onConfirm() {
      this.data.status = this.checked ? 1 : 0;
      // 表单验证
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          let res = null
          // 判断id是否为空
          if (this.data.id === '') {
            // 新增
            // 发送添加请求
            res = await api.addObj(this.data)
          } else {
            // 发送修改请求
            res = await api.updateObj(this.data)
          }
          // 判断是否成功
          if (res.success) {
            this.$message.success(res.message)
            // 刷新
            this.search(this.pageNo, this.pageSize)
            // 关闭窗口
            this.addDialog.visible = false
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    // 打开编辑窗口
    handleEdit(row) {
      // 数据回显
      this.$objCopy(row, this.data) // 将当前编辑的数据复制到role对象中
      this.checked = this.data.status === 1 ? true : false;
      // 设置窗口标题
      this.addDialog.title = '编辑工序类别'
      // 显示编辑窗口
      this.addDialog.visible = true
    },
    handleINFO(row) {
      // 数据回显
      this.$objCopy(row, this.data) // 将当前编辑的数据复制到role对象中
      this.checked = this.data.status === 1 ? true : false;
      // 设置窗口标题
      this.infoDialog.title = '工序类别信息'
      // 显示编辑窗口
      this.infoDialog.visible = true
    },

    /**
     * 重置查询条件
     */
    resetValue() {
      // 清空查询条件
      this.searchModel.name = ''
      this.searchModel.type = ''
      this.searchModel.level = ''
      this.searchModel.status = ''
      // 重新查询
      this.search()
    },
  }
}
</script>

<style lang="scss">
.tableBox{
  width: 100%; font-size: 12px
}
/* 下拉滚动条 */
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: #c8c8c8;
}

.formLabel {
  font-size: 12px;
  color: #333333;
  font-family: "MicrosoftYaHeiLight", "微软雅黑 Light", "微软雅黑", sans-serif;
  font-weight: 200;
  // line-height: 30px;
}

.f-item>>>.el-input__inner {
  width: 151px;
}
</style>
